<template>
  <view class="poupopDialog">

    <uv-popup ref="popup" mode="bottom" round="20" bgColor="#F7F8FA" :close-on-click-overlay="false">
      <view class="box">
        <view class="box-title">
          系统给您派了一个订单
        </view>
        <view class="infoBox">
          <view class="infoBox-item">
            <view class="label">预估收益</view>
            <view class="value">{{orderInfo.total_amount}}元</view>
          </view>
          <view class="infoBox-item">
            <view class="label">全程</view>
            <view class="value">{{orderInfo.distance}}公里</view>
          </view>
        </view>
        <view class="order-title">
          订单详情
        </view>
        <view class="order-item">
          <view class="order-item-title">
            {{orderInfo.type == 1?'酒后代驾':'长途代驾'}}
          </view>
          <view class="line">
            <view class="line-label">预约时间：</view>
            <view class="line-value">{{orderInfo.appointment_time}}</view>
          </view>
          <view class="line">
            <view class="line-label">起点：</view>
            <view class="line-value">{{orderInfo.start_point_address}}</view>
          </view>
          <view class="line">
            <view class="line-label">终点：</view>
            <view class="line-value">{{orderInfo.end_point_address}}</view>
          </view>
        </view>
        <view class="footer">
          <view class="footer-item-cancel footer-item" @click="handleCancel">
            取消订单
          </view>
          <view class="footer-item-view footer-item" @click="toHomeOrderDetail">
            查看订单
          </view>
        </view>
      </view>
    </uv-popup>
    <uv-popup ref="popupCancel" mode="bottom" round="20" :close-on-click-overlay="false">
      <view class="cancelBox">
        <view class="cancelBox-title">
          取消订单
        </view>
        <view class="textarea-containter">
          <textarea class="textarea-input" maxlength="200" v-model="params.cancel_remark" placeholder="请输入取消理由" placeholder-style="styles"></textarea>
          <view class="textarea-count">
            {{params.cancel_remark.length}}/200
          </view>
        </view>
        <view class="footer">
          <view class="footer-cancel" @click="handleclose">取消</view>
          <view class="footer-save" @click="handleSave">确认</view>
        </view>
      </view>
    </uv-popup>

  </view>
</template>

<script>
  import reqApi from "../../api/api.js";
  export default {
    data() {
      return {
        orderInfo: {
          total_amount: ""
        },
        params: {
          cancel_remark: "",
          id: null
        }
        
      }
    },
    methods: {
      open(id) {
        this.params.id = id;
        reqApi.jdOrderDetail({
          id: this.params.id
        }).then(res => {
          console.log("订单详情", res);
          this.orderInfo = res.data;
          this.$refs.popup.open();
        })
      },
      toHomeOrderDetail(){
        uni.navigateTo({
          url: `/pages/home/orderDetail?id=${this.params.id}`
        })
      },
      handleCancel() {
        this.$refs.popupCancel.open();
      },
      handleclose() {
        this.$refs.popupCancel.close();
      },
      handleSave() {
        reqApi.cancelOrder(this.params).then(res=>{
          this.$refs.popupCancel.close();
          uni.showToast({
            title: "取消成功",
            icon: 'none',
            mask: true,
            duration: 1500,
          })
          setTimeout(()=>{
            uni.navigateBack({delta:1})
          }, 1500)
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .cancelBox {
    padding: 30rpx;
    box-sizing: border-box;

    .cancelBox-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      text-align: center;
      margin-bottom: 30rpx;
    }

    .textarea-containter {
      width: 100%;
      height: 440rpx;
      background: #F7F8FA;
      border-radius: 30rpx;
      border: 2rpx solid #EEEEEE;
      padding: 30rpx;
      box-sizing: border-box;

      .textarea-input {
        height: 300rpx;
        width: 100%;
      }

      .textarea-count {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #AAAAAA;
        text-align: right;
      }
    }

    .footer {
      display: flex;
      justify-content: space-between;
      margin-top: 110rpx;

      .footer-cancel {
        width: 320rpx;
        height: 88rpx;
        background: #FFFFFF;
        border-radius: 200rpx;
        border: 2rpx solid #0078D3;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #0078D3;
        text-align: center;
        line-height: 88rpx;
      }

      .footer-save {
        width: 320rpx;
        height: 88rpx;
        background: #0078D3;
        border-radius: 200rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 88rpx;
      }
    }
  }

  .box {
    padding: 30rpx;
    box-sizing: border-box;

    .box-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #333333;
      text-align: center;
      margin-bottom: 30rpx;
    }

    .infoBox {
      background: #FFFFFF;
      border-radius: 20rpx;
      display: flex;
      justify-content: space-between;
      padding: 30rpx;
      box-sizing: border-box;

      .infoBox-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .label {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #AAAAAA;
        }

        .value {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 40rpx;
          color: #333333;
        }
      }
    }

    .order-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      margin: 30rpx 0;
    }

    .order-item {
      background: #fff;
      border-radius: 20rpx;
      padding: 30rpx;
      box-sizing: border-box;
      margin-bottom: 30rpx;

      .order-item-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #0078D3;
        margin-bottom: 30rpx;
      }

      .line {
        display: flex;
        justify-content: space-between;

        .line-label {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #666666;
        }

        .line-value {
          flex: 1;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #333333;
        }
      }
    }

    .footer {
      display: flex;
      justify-content: space-between;

      .footer-item-cancel {
        width: 320rpx;
        height: 88rpx;
        border-radius: 200rpx;
        border: 2rpx solid #0078D3;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #0078D3;
        text-align: center;
        line-height: 88rpx;
      }

      .footer-item-view {
        width: 320rpx;
        height: 88rpx;
        background: #0078D3;
        border-radius: 200rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        text-align: center;
        line-height: 88rpx;
      }
    }
  }
</style>